<template>
	<view>
		<view class="scrool-view-container">
			<!-- 左侧滑动区 -->
			<scroll-view class="left-scroll-view" scroll-y=true :style="{height: windowHeight + 'px'}">
				<view v-for="(item, i) in cateList" :key="i">
					<view :class="['left-scroll-view-item', i === active ? 'active' : '']" 
					@click="selected(i)">{{item.cat_name}}</view>
				</view>
			</scroll-view>
			<!-- 右侧滑动区 -->
			<scroll-view class="right-scroll-view" scroll-y=true :style="{height: windowHeight + 'px'}"
			:scroll-top="scrollTop">
				<view class="cate-lv2" v-for="(item2, i2) in cateLv2" :key="i2">
					<view  class="cate-lv2-name">/{{item2.cat_name}}/</view>
					<view class="cate-lv3">
						<view class="cate-lv3-item" v-for="(item3, i3) in item2.children"
						 @click="gotoGoodsList(item3.cat_id)">
							<image class="cate-lv3-img" :src="item3.cat_icon" mode="widthFix"></image>
							<text class="cate-lv3-text">{{item3.cat_name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: 0,
				cateList: [],
				active: 0,
				cateLv2:[],
				scrollTop: 0,
			};
		},
		onLoad(){
			const sysInfo = uni.getSystemInfoSync();
			console.log(sysInfo);
			this.windowHeight = sysInfo.windowHeight;
			this.getCateList();
			
		},
		methods:{
			async getCateList(){
				const {data: res} = await uni.$http.get('api/public/v1/categories');
				if (res.meta.status !== 200){
					return uni.$showMsg();
				}
				this.cateList = res.message;
				console.log("~~~");
				console.log(this.cateList);
				this.cateLv2 = res.message[0].children;
			},
			
			selected(i){
				this.active = i;
				this.cateLv2 = this.cateList[i].children;
				this.scrollTop = 1 - this.scrollTop;
			},
			
			gotoGoodsList(cat_id){
				uni.navigateTo({
					url:'/subpkg/goods_list/goods_list?cat_id=' + cat_id
				})
			}
		}
	}
</script>

<style lang="scss">
	.scrool-view-container{
		display: flex;
		flex-direction: row;
	}
	.left-scroll-view{
		width: 160rpx;
	}
	.left-scroll-view-item{
		background-color: #502794;
		color: #97f3e2;
		line-height: 60px;
		font-size: 12px;
		&.active{
			background-color: #770216;
		}
	}
	.cate-lv2{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.cate-lv2-name{
		font-size: 50rpx;
		color: red;
	}
	.cate-lv3{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		// justify-content: space-around;
	}
	.cate-lv3-item{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		border: 5rpx solid #dddddd;
		border-radius: 5rpx;
		box-shadow: 0 0 10rpx #888888;
		margin: 8rpx;
		.cate-lv3-img{
			width: 180rpx;
		}
	}
</style>
